<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    {% include 'admin/common/header.html' %}
    <link rel="stylesheet" href="{{ url_for('static', filename='admin/admin/css/other/console1.css') }}"/>

    <!-- 主 题 更 换 -->
    <style id="pearadmin-bg-color"></style>
</head>
<body class="pear-container">
<div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">公众号</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value1">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <span class="iconfont" style="color:#3FAF6C;font-size:45px">&#xe603;</span>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">公众号文章</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value2">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-wenzhang"></use>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">今日采集文章</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value3">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4  top-panel-tips">
                            <span class="iconfont" style="color:#3FAF6C;font-size:45px">&#xe646;</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">今日入库文章</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs8 layui-col-md8 top-panel-number" style="color: #28333E;" id="value4">
                            0
                        </div>
                        <div class="layui-col-xs4 layui-col-md4 top-panel-tips">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-ruku"></use>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <div id="echarts-records-2"
                             style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header" id="collecthead">采集动态 <span class="more" id="moreData">更多</span></div>
                <div class="layui-card-body" style="display:block" id="collectdata">
                    <dl id="logstream-container" class="layuiadmin-card-status">
                    </dl>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
             <div class="layui-card">
                <div class="layui-card-header">机器人状态</div>
                <div class="layui-card-body">
                    <ul class="list" id="robot-container">
                        <li class="list-item"><span class="title">优化代码格式</span><span
                                class="footer">2020-06-04 11:28</span></li>
                    </ul>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">异常日志</div>
                <div class="layui-card-body">
                    <ul class="list" id="logErrorstream-container">
                        <li class="list-item"><span class="title">优化代码格式</span><span
                                class="footer">2020-06-04 11:28</span></li>
                    </ul>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">
                    链接
                </div>
                <div class="layui-card-body">
                    <a target="_blank" href="/admin/wxOfficialAcc/articleInfo"
                       class="pear-btn pear-btn-primary  layui-btn-fluid"
                       style="margin-top: 8px;height: 50px;line-height: 50px;">公众号文章</a>
                    <br/>
                    <a target="_blank" href="/admin/wxOfficialAcc/offaccInfo"
                       class="pear-btn pear-btn-warming  layui-btn-fluid"
                       style="margin-top: 8px;height: 50px;line-height: 50px;">公众号管理</a>
                    <br/>
                    <a target="_blank" href="/admin/robot/"
                       class="pear-btn pear-btn-danger  layui-btn-fluid"
                       style="margin-top: 8px;height: 50px;line-height: 50px;">机器人管理</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!--</div>-->
{% include 'admin/common/footer.html' %}
<script>
        // 异常日志 及 采集动态数据渲染
		$.ajax({
		    //请求方式
		    type:'get',
		    //发送请求的地址
		    //我这里的地址是不需要传数据的，所以没有拼接参数
		    url:'/api/dataAnalysis/logstream?limitNum=0',
		    //服务器返回的数据类型
		    dataType:'json',
		    //请求成功的处理
		    success:function(data){
		        //console.log(data);
		        var group = data.data;
		        //拼接字符串
			    var str = '';
			    var strerror = '';
			    //对数据做遍历，拼接到页面显示 #5FB878
		        for(var i=0;i<group.length;i++){
                    if(group[i].article_nu == 0){
                    strerror += '<li class="list-item"><span class="title" title="'+group[i].desc+'">'+group[i].robot_name+' '+group[i].wx_name+'</span><span class="footer">'+group[i].update_at+'</span></li>'
                    }
			        str += '<dd><div class="layui-status-img"><a href="javascript:;"><img style="width: 32px;height: 32px;border-radius: 50px;"'+
			        	   	'src="/static/admin/admin/images/avatar.jpg"</a></div>'+
			        	   		'<div><p>'+
			        	   			'<a class="pear-text" href="javascript:;">'+ group[i].robot_name +'</a> ： '+ group[i].desc +'</p>'+
			        	   			'<span>'+ group[i].update_at +'</span>'+
			        	   		'</div>'+
			        	   '</div>';
		        }
		        if(strerror == ''){ strerror='<li class="list-item"><span class="title">没有检测到异常</span></li>'; }
		        //放入页面的容器显示
		        $('#logstream-container').html(str);
		        $('#logErrorstream-container').html(strerror);
		    },
		    //请求失败的处理
		    error:function(jqXHR){
		        console.log(jqXHR);
		    }
		});

		 // 机器人状态数据渲染
		$.ajax({
		    type:'get',
		    url:'/admin/robot/data',
		    dataType:'json',
		    success:function(data){
		        //console.log(data);
		        var group = data.data;
			    var str = '<li class="list-item"><span class="title"  >robot</span> <span class="content" style="margin-left: 96px;">nowCapacity</span><span class="footer">updatetime</span></li>';
		        for(var i=0;i<group.length;i++){
                    str += '<li class="list-item"><span class="title" title="'+group[i].remark+'">'+group[i].name+'</span> <span class="content">'+group[i].now_capacity+'</span><span class="footer">'+group[i].update_at+'</span></li>'
                    }
		        if(str == ''){ str='<li class="list-item"><span class="title">暂无robot</span></li>'; }

		        $('#robot-container').html(str);
		    },
		    error:function(jqXHR){
		        console.log(jqXHR);
		    }
		});

//打开关闭机器人采集动态

$("#collecthead").click(function () {
if($("#collectdata").css("display")=="none"){
        //console.log('目前是关闭状态')
        //$("#collectdata").css("display", "block");
        $("#collectdata").show();
        return ;
    }
if($("#collectdata").css("display")=="block"){
        //console.log('目前是打开状态')
        //$("#collectdata").css("display", "none");
        $("#collectdata").hide();
        return ;
    }
});

</script>

<script>
  layui.use(['layer', 'echarts', 'element', 'count'], function () {
    var $ = layui.jquery,
      layer = layui.layer,
      element = layui.element,
      count = layui.count,
      echarts = layui.echarts,
      article_all = 0,
      offAcc_all = 0,
      today_article_nu = 0,
      today_article_indb_nu = 0;

     //采集东台 更多 弹出层
     $("#moreData").click(function () {
     layer.open({
     type: 2//0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层)
     ,title:'更多采集动态'
     ,area: ['500px', '500px']
     ,shade: 0.5//遮幕
     ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
     ,btn: ['主界面', '取消']
     ,btnAlign: 'c'//按钮排列：居中对齐
     ,moveType: 1 //拖拽模式，0或者1
     ,content: '/admin/robot/moreCollectData', //这里content是一个普通的String
         });
     });

    //获取数据块的数据
    $.ajax({
		    type:'get',
		    url:'/api/dataAnalysis/consoledata',
		    dataType:'json',
		    async : false,
		    success:function(data){
		        //console.log(data);
		        var group = data.data;
		        article_all = group.article_all;
		        offAcc_all = group.offAcc_all;
		        today_article_nu = group.today_article_nu;
		        today_article_indb_nu = group.today_article_indb_nu;
		        //console.log(article_all);

		       },
		    //请求失败的处理
		    error:function(jqXHR){
		        console.log(jqXHR);
		    }
		});
    //layer.msg("hello"+article_all);

     count.up('value1', {
                  time: 4000,
                  num: offAcc_all,
                  bit: 2,
                  regulator: 50
                  })
    count.up('value2', {
      time: 4000,
      num: article_all,
      bit: 2,
      regulator: 50
    })

    count.up('value3', {
      time: 4000,
      num: today_article_nu,
      bit: 2,
      regulator: 50
    })

    count.up('value4', {
      time: 4000,
      bit: 2,
      num: today_article_indb_nu,
      regulator: 50
    })

    var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden')
    var echartsRecords2 = echarts.init(document.getElementById('echarts-records-2'), 'walden')
     $.ajax({
        type: 'GET',
        url: '/api/dataAnalysis/collectAnalysis?days=7',
        contentType: "application/json; charset=utf-8",
        async: true,
        dataType: "json",
        success: function (data) {
        var mydata = data.data;
        var datestrList = [];
        var collectdataList = [];
        var indbdataList = [];

         for (var j = 0; j < mydata.length; j++) {
                datestrList.push(mydata[j].datestr);
                collectdataList.push(mydata[j].collectnum);
                indbdataList.push(mydata[j].indbnum);
            }

    var option = {
    title: {
                    text: '每日文章采集量'
                },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: [{
        type: 'category',
        data: datestrList,
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        }
      }],
      yAxis: [{
        type: 'value',
        splitNumber: 4,
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#DDD'
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#333'
          },
        },
        nameTextStyle: {
          color: '#999'
        },
        splitArea: {
          show: false
        }
      }],
      series: [{
        name: '文章',
        type: 'line',
        data: collectdataList,
        lineStyle: {
          normal: {
            width: 8,
            color: {
              type: 'linear',

              colorStops: [{
                offset: 0,
                color: '#A9F387' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#48D8BF' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            },
            shadowColor: 'rgba(72,216,191, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
          }
        },
        itemStyle: {
          normal: {
            color: '#fff',
            borderWidth: 10,
            /*shadowColor: 'rgba(72,216,191, 0.3)',
            shadowBlur: 100,*/
            borderColor: '#A9F387'
          }
        },
        smooth: true
      }]
    }
    echartsRecords.setOption(option)

    var option2 = {
    title: {
                    text: '每日文章入库量'
                },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: [{
        type: 'category',
        data: datestrList,
        axisLine: {
          lineStyle: {
            color: '#999'
          }
        }
      }],
      yAxis: [{
        type: 'value',
        splitNumber: 4,
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: '#DDD'
          }
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#333'
          },
        },
        nameTextStyle: {
          color: '#999'
        },
        splitArea: {
          show: false
        }
      }],
      series: [{
        name: '文章',
        type: 'line',
        data: indbdataList,
        lineStyle: {
          normal: {
            width: 8,
            color: {
              type: 'linear',

              colorStops: [{
                offset: 0,
                color: '#A9F387' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#48D8BF' // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            },
            shadowColor: 'rgba(72,216,191, 0.3)',
            shadowBlur: 10,
            shadowOffsetY: 20
          }
        },
        itemStyle: {
          normal: {
            color: '#fff',
            borderWidth: 10,
            /*shadowColor: 'rgba(72,216,191, 0.3)',
            shadowBlur: 100,*/
            borderColor: '#A9F387'
          }
        },
        smooth: true
      }]
    }
    echartsRecords2.setOption(option2)
     },
        error: function (msg) {
            layer.msg('数据出错了!!');
        }
    });

    window.onresize = function () {
      echartsRecords.resize()
    }

  })


</script>
</body>
</html>